<template>
    <div class="register_page">
      <transition name="form-fade" mode="in-out">
            
        <div class="main">
            <logo>
            </logo>
            <div class="form_contianer" v-show="showLogin">
              <div class='login_form'>
                <div class="manage_tip">
                  <p class="title">注册账号</p>
                  <p class="detail">我们提供一站式赠品采购、发货服务</p>
                </div>
                <el-form :model="registForm" :rules="rules" ref="registForm" size="small">
                  <el-form-item prop="username" class="form_input">
                      <el-input v-model="registForm.username" placeholder="用户名, 只支持字母和数字"><span>dsfsf</span></el-input>
                  </el-form-item>
                  <el-form-item prop="password" class="form_input">
                      <el-input type="password" placeholder="密码" v-model="registForm.password"></el-input>
                  </el-form-item>
                  <el-form-item prop="rePassword" class="form_input">
                      <el-input type="password" placeholder="确认密码" v-model="registForm.rePassword"></el-input>
                  </el-form-item>

                  <el-form-item prop="phoneNumber" class="form_input">
                      <el-input v-model="registForm.phoneNumber" placeholder="手机号码" class="phone-number"><span>dsfsf</span></el-input>
                      <!--<el-button type="primary" @click="getPhoneCode()" class="phone-btn">获取手机验证码</el-button>-->
                  </el-form-item>
                  <!--<el-form-item prop="phoneCode" label="手机验证码">-->
                      <!--<el-input v-model="registForm.phoneCode" placeholder="手机验证码"><span>dsfsf</span></el-input>-->
                  <!--</el-form-item>-->

                  <el-form-item class="form_button">
                      <el-button type="primary" @click="submitForm('registForm')" class="submit_btn">注册</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <img src="../../assets/icon/cover.png" alt="" class="cover">
            </div>
          </div>
            
        </transition>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import logo from '@/components/Logo'

    export default {
      data () {
        return {
          registForm: {
            username: '',
            password: '',
            rePassword: '',
            phoneNumber: '',
            phoneCode: '888888'
          },
          rules: {
            username: [
              { required: true,  pattern: /^[a-zA-Z0-9]{4,20}$/,  message: '长度在 4 到 20 个字母和数字', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            rePassword: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            phoneNumber: [
              { required: true, pattern: /1[0-9]{10}/, message: '请输入手机号', trigger: 'blur' }
            ]
          },
          showLogin: false,
        }
      },
      mounted () {
        this.showLogin = true
      },
      components: {
        logo
      },
      computed: {
      },
      methods: {
        ...mapActions(['register']),
        async submitForm (formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              try {
                await this.register(this.registForm)
                this.$message({
                  message: '恭喜你，注册成功',
                  type: 'success'
                })
                this.$router.push('/login')
              } catch (error) {
                this.$notify.error({
                  title: '错误',
                  message: error.message,
                  offset: 100
                })
              }
            } else {
              this.$notify.error({
                title: '错误',
                message: '格式错误',
                offset: 100
              })
              return false
            }
          })
        }
      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';

    .manage_tip{  
      .title {
        color: #222;
        font-size: 14px;
        margin-bottom: 10px;
      }
      
      .detail {
        color: #555;
        font-size: 12px;
      }

      margin-bottom: 11px;
    }

    .main {
      .wh(700px, 427px);
      .ctp(700px, 500px);

    }
    
    .form_contianer{
        
        background-color: #fff;

        display: flex;

        box-shadow: -10px 10px 30px 10px rgba(244, 69, 12, .1);
    }

    .login_form {
      width: 300px;
      padding-top: 40px;
      padding-left: 40px;
      padding-right: 40px;
      display: flex;
      flex-direction: column;
      font-size: 12px;

      
    }

    // .cover {
      // .wh(400px, 380px);
    // }

    .form_input {
      margin-bottom: 12px;
      
    }
    .form_input /deep/ input {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #e2e2e2;
        font-size: 12px;
        padding: 0;
        color: #222;
        // background-color: white !important;
    }

    .form_button {
      margin-top: 20px;
    }

    .submit_btn {
      width: 100%;
    }

    .tip{
        font-size: 12px;
        color: red;
    }

</style>
